<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="bar.css">
    <!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>


</head>
<body style="background-color: white;">
    <div id="main">
        <canvas id="mainCanvas"></canvas>
        <input type="text" id="testx" disabled="true">
        <button type="button" class="btn btn-primary btn-sm" id="btn_restart">restart</button>
        <input type="text" id="brief" value="支持键盘和点击两种移动方式" disabled="true">
    </div>
    <span id="toolbars">
        <p class="text-center">Settings</p>

        <div id="toolgroup">
            <div class="form-group">
                <label for="formControlRange">旋转</label>
                <span class="badge badge-dark">Dark</span>
                <input type="range" class="form-control-range" id="col-rotate" max="30" min="0" step="1">
            </div>
            <div class="form-group">
                <label for="formControlRange">凝滞值</label>
                <span class="badge badge-dark">Dark</span>
                <input type="range" class="form-control-range" id="col-hitch" max="30" min="1" step="1">
            </div>
            <div class="form-group">
                <label for="formControlRange">红色数量</label>
                <input type="range" class="form-control-range input-range" id="formControlRange">
            </div>
            <hr>
            <div class="form-group">
                <label for="formControlRange">音效</label> 
                <input type="checkbox" id="col-audio">
            </div>
            <div class="form-group">
                <label for="formControlRange">测试模式1</label> 
                <input type="checkbox" id="col-mode1">
                <div class="form-group">
                    <label for="formControlRange">撞墙惩罚</label>
                    <span class="badge badge-dark">Null</span>
                    <input type="range" class="form-control-range input-range" id="formControlRange">
                </div>
                <div class="form-group">
                    <label for="formControlRange">吸收奖励</label>
                    <span class="badge badge-dark">Null</span>
                    <input type="range" class="form-control-range input-range" id="formControlRange">
                </div>
            </div>
        </div>
        
    </span>
    <audio src="wav/du.wav" id="audio_tan">您的浏览器不支持 audio 标签。</audio>
    <audio src="wav/get.wav" id="audio_get">您的浏览器不支持 audio 标签。</audio>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/paper.js/0.12.15/paper-core.min.js"></script>
    <script src="one1_2.js"></script>
    <script>
        var blue_x = 0 , blue_y = 0; 
        
        console.log(to_x + " " + to_y);
        console.log(bluec);
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建网格模型
         */
        // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
        var geometry = new THREE.BoxGeometry(600, 20, 800); //创建一个立方体几何对象Geometry
        var material = new THREE.MeshLambertMaterial({
            color: 'white',
          // wireframe: true
            // envMaps: 'refraction'
        }); //材质对象Material
        
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中
        // mesh.rotateY(4); //每次绕y轴旋转0.01弧度
        // 创建一个球体
        // var geometry_1 = new THREE.SphereGeometry(60, 40, 40);
        // mesh = new THREE.Mesh(geometry_1,material);
        // scene.add(mesh);
    
        var geometry_qiu1 = new THREE.SphereGeometry(20, 6, 6);
        var material_blue = new THREE.MeshLambertMaterial({
          color: 0x2194ce,
          // wireframe: true
        });
        var mesh2 = new THREE.Mesh(geometry_qiu1,material_blue);
        scene.add(mesh2);
        geometry_qiu1.translate(0,30,0);
    
    
        /**
         * 光源设置
         */
        //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(0, 500, 0); //点光源位置
        scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        // console.log(scene)
        // console.log(scene.children)
    
    
    
    
    
        /**
         * 相机设置
         */
        var width = 800; //窗口宽度
        var height = 600; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 400; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(400, 300, 400); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        //执行渲染操作   指定场景、相机作为参数
        renderer.render(scene, camera);
        
    
        // border_limit = function()   // 边界 管理
        // {
        //     // 限制
        //     blue.x = Math.max(c.position.x,0) ; c.position.x = Math.min(c.position.x,800);
        //     c.position.y = Math.max(c.position.y,0) ; c.position.y = Math.min(c.position.y,600);
            
        //     // 边缘碰撞
        //     if(c.position.x==800||c.position.x==0) {
        //         to_x = -to_x;
        //         if(audio_ck)    $audio_tan.play();
        //     }
        //     if(c.position.y==600||c.position.y==0) {
        //         to_y = -to_y; 
        //         if(audio_ck)    $audio_tan.play();
        //     }
        // }
    
        // 周期渲染
        function render() {
            if(!ck) return;
            renderer.render(scene, camera);
            // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
            geometry_qiu1.translate(-to_y,0,to_x);
            // blue_x -= to_x , blue_y -= to_y;
            // if(blue_x > 300 || blue_x < -300)
            //     // to_x  = -to_x ;
            // if(blue_y > 400 || blue_y < -400)
            //     // to_y = -to_y;
            ck = false;
        }
        setInterval("render()" , 8);
    
    
        // 控制绑定
        var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
        controls.addEventListener('change', render);//监听鼠标、键盘事件
    
    
        window.addEventListener('click', onMouseClick, false);
    
            var mouse = new THREE.Vector2();
    
            function onMouseClick(event) {
                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    
                var raycaster = new THREE.Raycaster();
    
                raycaster.setFromCamera(mouse, camera);
    
                // 计算物体和射线的焦点
                var intersects = raycaster.intersectObjects(scene.children, true);
    
                console.log(scene.children);
    
                // console.log(intersects)
    
                if (intersects.length > 0) {
                    // for (var i = 0; i < intersects.length; i++) {
    
                    var sceneChildren = scene.children;
                    console.log(sceneChildren);
                    for (var i = 0; i < sceneChildren.length-2; i++) {
    
                        console.log(sceneChildren[i]);
                        sceneChildren[i].material.color.set(0xffffff);
                    }
    
                    intersects[0].object.material.color.set(0x66ccff);
    
                    console.log(mouse.x + " " + mouse.y);
                } else {
                    var intersects = scene.children;
                    for (var i = 0; i < intersects.length; i++) {
    
                        intersects[i].material.color.set(0xffffff);
                    }
                }
    
            }
      </script>
    
</body>
</html>